import React from 'react'
import { Layout, Menu } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Modal} from 'antd';
import { useNavigate } from 'react-router-dom';
export default function index() {
    const navigate=useNavigate()
    function clickMenu(params){
        //  console.log('params',params);
         switch(params.key){
            case 'logout':
                showConfirm() 
                break
            case 'mine':
                console.log('个人中心');
                break
         }
    }
    const showConfirm = () => {
        confirm({
          title: '确定退出登录?',
          icon: <ExclamationCircleFilled />,
          onOk() {
            localStorage.clear()
            navigate('/Login')
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      };
    const { confirm } = Modal;
    const { Header } = Layout;
    const items1 = [
        {
            key: 'mine',
            label: '个人中心'
        },
        {
            key: 'logout',
            label: '退出登录'
        }
    ]
    const userInfo = JSON.parse(localStorage.userInfo)
    return (
        <Header className="header" style={{ color: 'white', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ color: 'white', display: 'flex', alignItems: 'center' }}>
                <span style={{ color: 'white', fontSize: '30px', marginRight: '20px' }}>蜗牛商城</span>
                欢迎你 {userInfo.account} <img style={{ width: '40px', height: '40px', borderRadius: '50%', marginLeft: '20px' }} src={`http://jacklv.cn/images/${userInfo.imgUrl}`} alt="" />
            </div>
            <Menu theme="dark" mode="horizontal" items={items1} onClick={clickMenu} style={{width:'200px'}} />
        </Header>

    );
}
